<template>
	<view>
		<view class="cflex-r u-p-30 cbg-white" style="justify-content: space-between;width: 100%;align-items: center;"
		@tap="chooseHead()">
			<view>头像</view>
			<view class="cflex-r" style="align-items: center;">
				<view class="u-m-r-20">
					<image mode='aspectFill' style="width: 100rpx;height: 100rpx;border-radius:50%;" :src="data.avatar"></image>
				</view>
				<view>
					<image style="width: 14rpx;height: 24rpx;" src="../../static/qieTu/arrow-right.png"></image>
				</view>
			</view>
		</view>

		<view class="cflex-c u-p-30 u-m-t-10 cbg-white">
			<view class="cflex-r u-m-b-20" style="justify-content: space-between;align-items: center;"
			@tap="showPopup()">
				<view>
					用户昵称
				</view>
				<view class="cflex-r" style="align-items: center;">
					<view class="u-m-r-20">
						{{data.name}}
					</view>
					<!-- <u-popup v-model="show" mode="bottom" length="30%" :closeable="true" close-icon-size="32">
						<view class="cflex-c" style="justify-content: space-around;padding:50rpx;height:100%;">
							<u-input v-model="data.name" type="text" 
							:border="true" :auto-height="true" />
						</view>
					</u-popup> -->
					<u-popup v-model="show" mode="bottom" length="30%" :closeable="true" close-icon-size="32"
					>
						<view class="cflex-c" style="justify-content: space-around;padding:100rpx 50rpx;
						align-items: center;">
							<u-input v-model="data.name" type="text" placeholder="请输入昵称"
							:border="true"  :auto-height="true" style="width:600rpx;"/>
						</view>
					</u-popup>
					<view>
						<image style="width: 14rpx;height: 24rpx;" src="../../static/qieTu/arrow-right.png"></image>
					</view>
				</view>
			</view>
			<view class="u-m-b-20" style="width: 100%;">
				<u-divider :use-slot="false" half-width="350"></u-divider>
			</view>
			<view class="cflex-r u-m-b-20" style="justify-content: space-between;align-items: center;">
				<view>
					手机号
				</view>
				<view>
					{{data.phone}}
				</view>
			</view>
			<view class="u-m-b-20" style="width: 100%;">
				<u-divider :use-slot="false" half-width="350"></u-divider>
			</view>
			<view class="cflex-r" style="justify-content: space-between;align-items: center;"
			>
				<view>
					性别
				</view>
				<picker mode="selector" :range="sexList" range-key="name"  @change="sexChange($event)">
					<view class="cflex-r picker" style="align-items: center;">
						<view class="u-m-r-20">
							<view class="picker">
								{{sex.value===0?sexList[0].name:sexList[1].name}}
							</view>
						</view>
						<view>
							<image style="width: 14rpx;height: 24rpx;" src="../../static/qieTu/arrow-right.png"></image>
						</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="u-m-t-60 u-m-20" style="color: #fff;">
			<u-button :hair-line="false" :custom-style="customStyle" @click="save()" >
				保存
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:'',
				show: false,
				customStyle: {
					color: 'black',
					backgroundColor: '#4578F7',
					color:'#fff'
				},
				sexList: [{
					name: '男',
					value: 0
				}, {
					name: '女',
					value: 1
				}],
				sex:{},
				img:""
			}
		},
		onShow(){
			
		},
		onLoad(){
			this.myInfo();
		},
		methods: {
			myInfo(){
				this.$request("kehu/user/info").then(res=>{
					 //console.log(res);
					this.data = res.data;
					this.sex.value = res.data.sex
					
				});
			},
			chooseHead(){
				// 选择图片
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						that.data.avatar=res.tempFilePaths[0];
						uni.uploadFile({
							url: that.$store.state.baseUrl + "common/up/single",
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								imgPath: res.tempFilePaths[0],
							},
							success(res1) {
								that.img =  JSON.parse(res1.data).url;
								console.log(res1)
							},
							fail(err) {
								 //console.log(err)
							}
						});
					}
				});
			},
			showPopup(){
				 //console.log("更改name");
				this.show=!this.show;
			},
			
			sexChange(e) {
				 //console.log(e.detail.value)
				this.sex = this.sexList[e.detail.value]
			},
			save() {
				let {name,avatar}=this.data;
				let sex=parseInt(this.sex.value)||0
				var params = {name,sex}
				console.log(this.img)
					params.avatar = this.img
				this.$request("kehu/user/updateUser",params).then(res=>{
					uni.showModal({
						title:'提示',
						content:'保存成功',
						showCancel:false,
						success(res) {
							if(res.confirm){
								uni.navigateBack({
									delta:1
								})
							}
						}
					})
					
				});
			}
		}
	}
</script>

<style>
</style>
